<template>
  <div>
    <el-dialog
      :title="billTitle"
      :visible.sync="dialogTableVisible"
      width="75%"
    >
      <p style="font-size:14px">
        <strong
          >账单总应收：{{ totalCost }} {{ standradCurrency }}， 余额：{{
            totalRemain
          }}
          {{ standradCurrency }}</strong
        >
        <span
        ><strong>合计：{{ headAppend }}</strong></span
        >
      </p>
      <div style="height:550px;" class="scrollbar">
        <el-scrollbar style="height:100%">
          <el-table class="text-sm" :data="tableData">
            <el-table-column type="index" label="序号" />
            <el-table-column
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.prop"
              :label="item.label"
            />
          </el-table>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-link
      type="primary"
      :underline="false"
      class="text-sm"
      @click="showDialog(data.id)"
      >{{ data.name }}</el-link
    >
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  props: ["data"],
  data() {
    return {
      billTitle: "",
      totalCost: "",
      totalRemain: "",
      headAppend: "",
      standradCurrency: "",
      tableData: [],
      dialogTableVisible: false,
      // 序号	运单号	费用名称	单价	币种	数量	总额	余额	费用时间	账单类型	备注
      tableColumns: [
        { prop: "waybillNo", label: "订单号" },
        { prop: "feeName", label: "费用名称" },
        { prop: "unitPrice", label: "单价" },
        { prop: "currency", label: "币种" },
        { prop: "count", label: "数量" },
        { prop: "totalCost", label: "总额" },
        { prop: "remain", label: "余额" },
        { prop: "accountDate", label: "费用时间" },
        { prop: "billTypeName", label: "账单类型" },
        { prop: "remark", label: "备注" }
      ]
    };
  },
  created() {},
  mounted() {
    this.billTitle = this.data.name + " 费用明细";
  },
  methods: {
    async showDialog(id) {
      this.dialogTableVisible = true;
      if (id !== null) {
        const data = {};
        data["id"] = id;
        let res = await ajax("findByIdWithReceives", data);
        this.tableData = res.waybillReceiveDetails;
        this.totalCost = res.totalCost;
        this.totalRemain = res.totalRemain;
        this.headAppend = res.append;
      }
    }
  }
};
</script>
<style scoped>
.el-scrollbar {
  display: flex;
  justify-content: space-around;
  margin-right: -15px;
}
div >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  width: 110%;
  height: 100%;
}
</style>
